<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>游戏管理（基于 Session 认证）</title>
</head>
<body>
  <h2>登录（Session）</h2>
  <form id="login-form">
    用户名: <input type="text" id="username" name="username"><br>
    密码: <input type="password" id="password" name="password"><br>
    <button type="submit">登录</button>
  </form>

  <hr>

  <h2>创建游戏</h2>
  <form id="create-game-form">
    游戏名称: <input type="text" id="game-name" name="name"><br>
    游戏描述: <input type="text" id="game-desc" name="desc"><br>
    <button type="submit">创建游戏</button>
  </form>

  <hr>

  <h2>获取游戏列表</h2>
  <button id="fetch-games">查询游戏</button>
  <ul id="game-list"></ul>

  <hr>
    <h2>游戏详情操作（查、改、删）</h2>
    <form id="game-detail-form">
        游戏 ID: <input type="number" id="game-id" required><br>
        修改名称: <input type="text" id="edit-name"><br>
        修改描述: <input type="text" id="edit-desc"><br>
        <button type="button" id="get-game">获取游戏详情</button>
        <button type="button" id="update-game">更新游戏</button>
        <button type="button" id="delete-game">删除游戏</button>
    </form>

  <script>
    // 获取游戏详情
    document.getElementById('get-game').addEventListener('click', async () => {
    const id = document.getElementById('game-id').value;
    const response = await fetch(`http://127.0.0.1:8080/casedemo15/games/${id}/`, {
        method: 'GET',
        credentials: 'include'
    });

    if (!response.ok) {
        alert("获取失败");
        return;
    }
  const game = await response.json();
  document.getElementById('edit-name').value = game.name;
  document.getElementById('edit-desc').value = game.desc;
  alert("获取成功：" + JSON.stringify(game));
});

// 更新游戏信息
document.getElementById('update-game').addEventListener('click', async () => {
  const id = document.getElementById('game-id').value;
  const name = document.getElementById('edit-name').value;
  const desc = document.getElementById('edit-desc').value;

  const response = await fetch(`http://127.0.0.1:8080/casedemo15/games/${id}/`, {
    method: 'PUT',
    headers: {
      'Content-Type': 'application/json'
    },
    credentials: 'include',
    body: JSON.stringify({ name, desc })
  });

  if (!response.ok) {
    alert("更新失败");
    return;
  }

  const result = await response.json();
  alert("更新成功：" + JSON.stringify(result));
});

// 删除游戏
document.getElementById('delete-game').addEventListener('click', async () => {
  const id = document.getElementById('game-id').value;

  const confirmed = confirm("确认要删除该游戏吗？");
  if (!confirmed) return;

  const response = await fetch(`http://127.0.0.1:8080/casedemo15/games/${id}/`, {
    method: 'DELETE',
    credentials: 'include'
  });

  if (response.status === 204) {
    alert("删除成功");
    document.getElementById('edit-name').value = '';
    document.getElementById('edit-desc').value = '';
  } else {
    alert("删除失败");
  }
});








    // 登录表单提交
    document.getElementById('login-form').addEventListener('submit', async function(e) {
      e.preventDefault();
      const username = document.getElementById('username').value;
      const password = document.getElementById('password').value;

      const response = await fetch('http://127.0.0.1:8080/casedemo15/login/', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
        },
        body: `username=${encodeURIComponent(username)}&password=${encodeURIComponent(password)}`,
        credentials: 'include'
      });

      const result = await response.json();
      alert(result.msg);
    });

    // 创建游戏表单提交
    document.getElementById('create-game-form').addEventListener('submit', async function(e) {
      e.preventDefault();
      const name = document.getElementById('game-name').value;
      const desc = document.getElementById('game-desc').value;

      const response = await fetch('http://127.0.0.1:8080/casedemo15/games/', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        credentials: 'include',
        body: JSON.stringify({ name, desc })
      });

      const result = await response.json();
      alert("游戏创建成功：" + JSON.stringify(result));
    });

    // 查询游戏列表功能
    document.getElementById('fetch-games').addEventListener('click', async function() {
      const response = await fetch('http://127.0.0.1:8080/casedemo15/games/', {
        method: 'GET',
        credentials: 'include'
      });

      const data = await response.json();
      const gameList = document.getElementById('game-list');
      gameList.innerHTML = '';  // 清空旧数据

      data.forEach(game => {
        const li = document.createElement('li');
        li.textContent = `游戏名：${game.name}，描述：${game.desc}`;
        gameList.appendChild(li);
      });
    });
  </script>
</body>
</html>
